<template>
    <div style="text-align: center;">
        <br/>
        <form :model="formData">
            <span style="font-size: large; color: #0f0f0f;text-align: center; margin-right: 10px">关键参数:</span>
            <span style="font-size: medium; color: #0f0f0f;text-align: center">选择方式: </span>
            <select v-model="formData.choose" style="width: 80px; margin-right: 30px" @change="textChange"
                    name="choose">
                <option value="per">百分比</option>
                <option value="num">个数</option>
            </select>
            <span style="font-size: medium; color: #0f0f0f;text-align: center">选择标准: </span>
            <input style="width: 80px;margin-right: 50px" v-if="formData.choose === 'per'" v-model="formData.param"
                   name="param"/>
            <select style="width: 80px;margin-right: 50px" v-else v-model="formData.param" name="param">
                <option label="1" value=1></option>
                <option label="2" value=2></option>
                <option label="3" value=3></option>
                <option label="4" value=4></option>
                <option label="5" value=5></option>
                <option label="6" value=6></option>
            </select>

            <span style="font-size: large; color: #0f0f0f;text-align: center; margin-right: 10px">遗传算法参数:</span>
            <span style="font-size: medium; color: #0f0f0f;text-align: center">迭代次数：</span>
            <span style="font-size: medium; color: #0f0f0f;text-align: center;margin-right: 30px">200</span>
            <span style="font-size: medium; color: #0f0f0f;text-align: center">种群个体：</span>
            <span style="font-size: medium; color: #0f0f0f;text-align: center;margin-right: 30px">30</span>

            <button type="button" style="font-size: medium; color: #0f0f0f; cursor:pointer"
                    @click="onSubmit()">安全控制
            </button>
        </form>
        <br/>
    </div>
</template>

<script>
    import eventBus from './event-bus'
    export default {
        name: "Choose",
        data() {
            return {
                formData: {
                    choose: "per",
                    param: 70,
                },
                info: {
                    btrOptimizalValues: [],
                    stlOptimizalValues: [],
                    optimizalDatas: [],

                    btrInferenceValues: [],
                    stlInferenceValues: [],
                    realDatas: [],

                    keyParam: [],
                    contribution: [],

                    realpropValue: [],
                    optimizalpropValue: []
                },
                rule: {
                    param: [
                        {required: true, message: "不能为空", trigger: 'blur'},
                        {pattern: /^([1-9][0-9]{0,1}|100)$/, message: "所填数在1-100", trigger: "blur"}
                    ]
                },
                loading: false
            }
        },
        methods: {
            onSubmit() {
                this.loading = true;
                eventBus.$emit('load',this.loading);
                this.$axios.get("http://localhost:8088/BRB_back2/updateData", {
                    params: {
                        choose: this.formData.choose,
                        param: this.formData.param,
                    }
                }).then(res => {
                    this.info = res.data;
                    this.loading = false;
                    eventBus.$emit('load',this.loading);
                });
            },
            textChange: function () {
                if (this.formData.choose == "per") {
                    this.formData.param = 70;
                } else {
                    this.formData.param = 3;
                }

            },

        },
        watch: {
            info() {
                eventBus.$emit('data-figure',this.info);
                eventBus.$emit('choose',this.formData.choose);
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>